<template>
  <div class="app-container">    
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"          
        >删除</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-table 
        :data="oderInfoShow"
        row-key="id"  
        :tree-props="{children: 'children'}"
        @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :selectable="checkboxSelect" width="50" align="center" />                
          <el-table-column prop="contactName" label="收件人"></el-table-column>
          <el-table-column prop="contactPhone" label="收件手机"></el-table-column>
          <el-table-column prop="contactAddress" label="收件地址"></el-table-column>
          <el-table-column prop="userName" label="顾客姓名"></el-table-column>
          <el-table-column prop="userPhone" label="顾客手机"></el-table-column>
          <el-table-column prop="fileName" label="附件名称"></el-table-column>
          <el-table-column prop="number" label="数量"></el-table-column>
        </el-table>

        <div class="pagination-container">
        <el-pagination
          
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-show="total>0"
          :total="total"          
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          background
        >
        </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog 
    :title="title" 
    :visible.sync="open" 
    :close-on-click-modal="false" 
    width="1000px">
      <order-form :orderBaseInfo="orderBaseInfo" :inOrderInfo="orderInfo" :status="status" @closeDialog="closeDialog" @confrimDialog="confrimDialog"></order-form>    
    </el-dialog>
  </div>
</template>

<script>

import { getToken } from "@/utils/auth";
import orderForm from "@/components/order";
import { formatDate } from "@/utils/index";

export default {
  name:"orderUpload",
  components: {
    orderForm
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/order/upload",
      headers: { Authorization: "Bearer " + getToken() },
      orderInfoList:[],
      orderBaseInfo:{
        sendName:"测试1",
        sendPhone:"15940851234",
        sendAddress:"花果山水帘洞9587号猴子",
        id:""
      }, 
      orderInfo:{
        contactName:"",
        contactPhone:"",
        contactAddress:"",
        zipCode:"",
        orderType:1,
        deliveryTime:"",
        updateInfo:"",
        orderNo:"",
        toStore:false,
        deliveryTime:formatDate(new Date().getTime() + 6 * 24 * 60 * 60 * 1000, 'yyyy-MM-dd').substr(0,10),
        userName:"",
        userPhone:"", 
        children:[]
      },     
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false, 
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,   
      status:"insert" ,
      // 选中数组
      ids: [],
      currentPage:1,
      limit:10,
      total:0,
      oderInfoShow:[],
      paginationStatus:false,
      //选中收件人名数组
      names:[],
    }
  },
  mounted() {
  
  },    
  methods: {
    //添加订单
    handleAdd() {
      this.status = "insert"
      this.open = true;
      this.title = "添加订单";
      this.orderBaseInfo.id = this.orderInfoList.length + 1
      this.reset()      
    },
    closeDialog() {
      this.open = false;      
    },
    //子组件调用，确定按钮事件
    confrimDialog(orderInfo, upFileList) {
      this.open = false;
      //console.log(this.ids[0])
      if (this.status == "insert") {        
        this.orderInfoList.push(JSON.parse(JSON.stringify(orderInfo)))
        // for (let i = 0; i < 20; i++) {
        //   orderInfo.id = parseInt(orderInfo.id) + 1
        //   orderInfo.contactName = "123" + i
        //   for (let j in orderInfo.children) {
        //     orderInfo.children[j].id = orderInfo.id + "" + (j + 1)
        //   }
        //   this.orderInfoList.push(JSON.parse(JSON.stringify(orderInfo)))
        // }

        this.$modal.msgSuccess("添加成功");
        this.pageList();
      } else {
        //console.log(this.orderInfoList[this.ids[0] - 1])        
        this.orderInfoList[this.ids[0] - 1] = JSON.parse(JSON.stringify(orderInfo))
        this.orderInfoList = JSON.parse(JSON.stringify(this.orderInfoList))

        this.$modal.msgSuccess("修改成功");
        this.pageList();
       }
      
    },
    // 多选框选中数据
    handleSelectionChange(selection) {      
      this.ids = selection.map(item => item.id);
      this.names = selection.map(item => item.contactName);
      console.log(this.ids)
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    //重置实体
    reset() {
      this.orderInfo = {
        contactName:undefined,
        contactPhone:undefined,
        contactAddress:undefined,
        zipCode:undefined,
        orderType:1,
        orderNo:"",
        toStore:false,
        deliveryTime:formatDate(new Date().getTime() + 6 * 24 * 60 * 60 * 1000, 'yyyy-MM-dd').substr(0,10),
        userName:"",
        userPhone:"",  
        updateInfo:"",      
        children:[]
      }
    },
    handleUpdate() {
      this.open = true;
      this.title = "修改订单";
      this.status = "update"
      this.orderInfo = JSON.parse(JSON.stringify(this.orderInfoList[this.ids[0] - 1]))
    },
    //删除行
    handleDelete(row) {
      const concatNames = row.contactName ||  this.names
      this.$modal.confirm('是否确认删除收件人为"' + concatNames + '"的数据项？').then(function() {
        return ;
      }).then(() => {
        this.deleteOrder()
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    //树形表格子行 列头checkbox不可用
    checkboxSelect(row, rowIndex) {
      if(row.contactName == undefined) {
        return false
      } else {
        return true
      }      
    },
    //处理切换页码
    handleSizeChange(val) {      
      this.limit = val;
      this.pageList();
    },
    handleCurrentChange(val) {     
      this.currentPage = val;
      this.pageList();
    },
     // 具体分页操作
    pageList() {
      this.oderInfoShow = JSON.parse(JSON.stringify(this.orderInfoList.filter(
        (item, index) =>
          index < this.currentPage * this.limit &&
          index >= this.limit * (this.currentPage - 1)
      )));
      this.total = this.orderInfoList.length;
    },
    //删除行方法
    deleteOrder() {
      //删除选中行
      for (let i = this.ids.length; i > 0; i--) {
        this.orderInfoList.splice(this.ids[i - 1] - 1, 1)
        //console.log("删除了" & this.ids[i - 1] - 1)
      }
      //console.log(this.orderInfoList)
      //重置树结构id
      if (this.orderInfoList.length > 0) {
        for (let j = 0; j < this.orderInfoList.length; j++) {
          this.orderInfoList[j].id = j + 1
          for (let k = 0; k < this.orderInfoList[j].children.length; k++) {
            this.orderInfoList[j].children[k].id = this.orderInfoList[j].id + "" + (k + 1)
          }
        }
        this.orderInfoList = JSON.parse(JSON.stringify(this.orderInfoList))
        const totalPage = Math.ceil(this.orderInfoList.length / this.limit)
        
        //当前页大于总页数代表已经删除最后一条数据 将总页数赋值给当前页 会跳转到上一页
        this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
        //当页数小于为0 就给它为1页 否则就还是当前页
        this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
   
        this.pageList()
      } else {
        this.oderInfoShow = JSON.parse(JSON.stringify([]))
        this.total = 0
      }
    }
  }
}
</script>

<style scoped>
.card-box {
  padding-right: 0px;
  padding-left: 0px;
}

.pagination-container {
    position: relative;
    height: 25px;
    margin-bottom: 10px;
    margin-top: 15px;
    padding: 10px 20px !important;
}
</style>